<template>
	<view>
		<view style="padding: 5px 10px 20px;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao" style="width: 100%;">
					<span class="biao_span1">3</span>
					<text class="cardTitle">{{text.xieyi}} </text>
					<view class="order_info_btn orange" style="float: right;" v-if="dqr" @click="mzxy()">{{$t("待确认")}}</view>
					<view class="order_info_btn green" style="float: right;" v-if="yqr">{{$t("已确认")}}</view>
					<view style="clear: both;"></view>
				</view>
				<view style="clear: both;"></view>
			</view>

			<view style="width: 100%;padding: 20rpx 0rpx;">
				<view class="buy_files" v-if="filelist" style="position: relative;z-index: 33;">
					<view style="padding: 5px 10px;font-size: 14px;" class="downLoad" @click="mzxy()">
						{{ filelist.substring(filelist.length, filelist.length - 20) }}
					</view>
				</view>
			</view>
			<view style="float: left;color: red;margin-bottom: 5%;font-size: 10px;margin-left: 10px;margin-left: 5%;" v-if="ddfqr">
				{{$t("待对方确认")}}
			</view>
			<view style="float: left;color: rgb(56, 222, 106);margin-bottom: 5%;font-size: 10px;margin-left: 10px;margin-left: 5%;" v-if="dfyqr">
				{{$t("对方已确认")}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
		HTTP_IMG_UTL,
		IMAGE_URL
	} from "@/config/app";

	export default {
		components: {

		},
		props: {
			order: {
				type: [Array, Object, Number, String],
				default: ''
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,

				//语言
				lang: this.$i18n.locale,
				//文字
				text: {
					agree: this.$t('是否同意该协议'),
					other_agree: this.$t('对方是否同意该协议'),
					wait_agree: this.$t('未同意'),
					is_agree: this.$t('已同意'),
					xieyi: this.$t('委托售后及免责协议')
				},
				//协议文件
				filelist: this.$t('委托售后及免责协议') + ".txt",
				ddfqr:false,
				dfyqr:false,
				dqr:false,
				yqr:false,
			}
		},
		mounted() {
			// console.log(this.order)
			this.daiduifangqueren()
			this.duifangyiqueren()
			this.daiqueren()
			this.yiqueren()
		},
		methods: {
			daiduifangqueren(){
				if(this.order.role==1&&this.order.orderJoin.is_agreement==0){
					this.ddfqr=true;
				}else if(this.order.role==2&&this.order.orderInfo.is_agreement==0){
					this.ddfqr=true;
				}
			},
			duifangyiqueren(){
				if((this.order.role==1&&this.order.orderJoin.is_agreement==1)||(this.order.role==2&&this.order.orderInfo.is_agreement==1)){
					this.dfyqr=true;
				}
			},
			daiqueren(){
				if((this.order.role==1&&this.order.orderInfo.is_agreement==0)||(this.order.role==2&&this.order.orderJoin.is_agreement==0)){
					this.dqr=true;
				}
			},
			yiqueren(){
				if((this.order.role==1&&this.order.orderInfo.is_agreement==1)||(this.order.role==2&&this.order.orderJoin.is_agreement==1)){
					this.yqr=true;
				}
			},
			mzxy() {
				uni.navigateTo({
					url: "/pages/textbook/mzxy?order_id=" + this.order.orderInfo.id + "&join_order_id=" +
						this.order.orderInfo.join_order_id
				})
			},
			isAgreement(role) {
				uni.showModal({
					title: this.$t('委托售后及免责协议'),
					content: this.$t("是否确认委托售后及免责协议"),
					confirmText: this.$t('是'), // 修改确认按钮文字
					cancelText: this.$t('否'),
					success: (res) => {
						if (res.confirm) {
							const that = this
							that.$u.api.order.isAgreement({
								role: role,
								order_id: this.order.orderInfo.id,
								join_order_id: this.order.orderInfo.join_order_id,
							}).then(res => {
								this.$u.toast(this.$t('操作成功'))
								setTimeout(() => {
								uni.redirectTo({
									url: '/pages/ordering/orderDetail?id='+that.order.orderInfo.id+'&join_order_id='+that.order.orderInfo.join_order_id+'&status='+that.status+'&isDetail=true'
								  });
								},1000)
							})
							// 用户点击了确定，执行相应的逻辑
						} else if (res.cancel) {
							// 用户点击了取消，执行相应的逻辑
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/orderDetail.scss";

	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}

	.flex {
		width: 100%;
		display: flex;
	}

	.biao {
		margin-top: 0rpx;
		width: 80%;
		margin-left: 0rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.biao_span {
		color: darkorange;
		font-size: 18px;
		margin-right: 5px;
	}

	.cardTitle {
		font-size: 24rpx;
		width: 94%;
		padding-top: 6rpx;
	}

	.order_img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}

	.close_image2 {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		float: left;
	}
</style>